<template>
	<view class="app">
		<view v-if="positionList && positionList.length > 0">
			<view class="positionListClass" v-for="item in positionList" :key="item.postId">
				<!-- <view class="numberOfJobNames">{{  }}</view> -->
				<view class="numberOfJobNames">{{ item.postName }}（<span style="color: #418cff;">{{item.quantity}}</span>）</view>
				<view style="color: #0066ff; text-decoration:underline; font-size: 26rpx;" @click="responsibilityEvent(item)" >安全生产职责</view>
				<view style="color: #0066ff; text-decoration:underline; font-size: 26rpx;" @click="personnelFileEvent(item)" >人员档案</view>
			</view>
		</view>

    <view v-else class="empty-block" style="transform: translateY(50%);">
      <u-empty text="暂无数据" mode="data" icon-size="80"></u-empty>
    </view>
	</view>
</template>

<script>
/**
 * 引入API接口
 * accordingToTheDepartmentObtainingThePositionList: 根据部门Id获取岗位列表
 */
import { accordingToTheDepartmentObtainingThePositionList } from "@/apis/risk/index.js"

export default {
	/**
	 * 定义数据
	 */
	data () {
		return {
			/* 请求携带的参数 */
			params: {
				// 部门ID
				deptId: undefined
			},

			/* 岗位列表 */
			positionList: []
		}
	},

	/**
	 * 定义方法
	 */
	methods: {
		/* 根据部门Id获取岗位列表 */
		async accordingToTheDepartmentObtainingThePositionList () {
			const req = await accordingToTheDepartmentObtainingThePositionList(this.params);
			this.positionList = req
		},
		
		/* 安全生产职责点击事件 */
		responsibilityEvent (rowData) {
			// 页面跳转
			uni.navigateTo({
				url: `/safetyProductionResponsibilitySystem/safetyProductionResponsibilities/indexn2?postId=${rowData.postId}`
			});
		},

		/* 人员档案点击事件 */
		personnelFileEvent (rowData) {
      console.log(rowData)
			// 页面跳转
      var users = JSON.stringify(rowData.users)
			uni.navigateTo({
				url: '/safetyProductionResponsibilitySystem/personnelFiles/index?users='+ users
			});
		}
	},

	/**
	 * 接受路由传参
	 */
	onLoad (options) {
		this.params.deptId = options.deptId
		this.accordingToTheDepartmentObtainingThePositionList()
	}
}
</script>

<style lang="scss" scoped>
	.app {
		min-height: 98vh;
	}
	.positionListClass {
		display: flex;
    justify-content: space-around;
		align-items: center;
		margin: 30rpx 0;
		padding: 40rpx 0;
		background-color: #FFF;
		border-radius: 10rpx;

		.numberOfJobNames {
			width: 20%;
			// overflow:hidden;
			// white-space: nowrap;
			// text-overflow: ellipsis;
			// -o-text-overflow:ellipsis;
		}
	}
</style>